<template>
  <div class="layout-header">
    <div class="header-title">
      <el-icon :size="32"><Eleme /></el-icon>
      <!-- <img src="/@/assets/img/logo.png" width="32" height="32" alt="" /> -->
      <span style="padding: 0 6px">后台模版</span>
      <span style="background-color: #c9cdd4; width: 2px; height: 14px"></span>
      <span style="padding: 0 6px; color: #86909c">{{ title }}</span>
    </div>
    <div class="flex justify-end items-center">
      <el-icon class="cursor-pointer   mr-3 ml-3  "><FullScreen /></el-icon>
      <el-badge :value="200" :max="99" class="cursor-pointer   mr-3 ml-3  ">
        <el-icon><BellFilled /></el-icon>
      </el-badge>
      <el-dropdown class="title-user">
        <div class="el-dropdown-link">
          <el-avatar
            :size="32"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            style="margin-right: 8px"
          />
          用户<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="SwitchButton" @click="loginOut"
              >退出登陆</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown, SwitchButton } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const title = import.meta.env.VITE_APP_BASE_TITLE;
const loginOut = () => {
  localStorage.setItem("whiteList", "");
  router.push("/login");
};
</script>

<style scoped lang="less">
.layout-header {
  width: 100%;
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06);
  .header-title {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
    display: flex;
    align-items: center;
  }
  .title-user {
    font-size: 14px;
    color: #1d2129;
    padding: 0 20px;
  }
  .el-dropdown-link {
    display: flex;
    align-items: center;
  }
}
</style>
